import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h,
} from "snabbdom";

// 创建出patch函数
const patch = init([classModule, propsModule, styleModule, eventListenersModule])
const container = document.getElementById('container')
const btn = document.getElementById('btn')
const vnode1 = h('ul', {}, [
	h('li', {key: 'A'}, 'A'),
	h('li', {key: 'B'}, 'B'),
	h('li', {key: 'C'}, 'C'),
	h('li', {key: 'D'}, 'D')
])
// patch是修补的意思
patch(container, vnode1)
const vnode2 = h('ul', {}, [
	h('li', {key: 'A'}, 'A'),
	h('li', {key: 'B'}, 'B'),
	h('li', {key: 'C'}, 'C'),
	h('li', {key: 'D'}, 'D'),
	h('li', {key: 'E'}, 'E')
])
// 点击按钮时，将vnode1变为vnode2
// 但是每次都是这两个固定值进行比较，反映到节点上打补丁
// 正常不加key的情况下
// 如果更新的节点在最后面，那么前面的不更改，只更改后面
// 如果更新的节点加在了第一个，那么所有的节点，后续都会改变
// 加上key的好处是进行唯一标识，防止做无用更新，但是key最好不要相同
// 这时候加在除最后一个节点之前的节点，就不会导致后面的节点更新

// key服务于最小量更新
// key会告诉diff算法其节点更改前后为同一节点
// 只有同一个虚拟节点，才会做精细化比较，否则就会包里暴力删除旧所有虚拟节点，插入新的
// 选择器相同sel且key相同的节点就是同一虚拟节点，否则还是会暴力删除
// 例如ul标签和ol标签内有相同的li，但不是同一个标签
// 变节点父级基本不会遇见
btn.onclick = function () {
	patch(vnode1, vnode2)
}

const vnode3 = h('ul', {}, [
	h('li', {key: 'A'}, 'A'),
	h('li', {key: 'B'}, 'B'),
	h('div', {key: 'C'}, 'div'),
	h('li', {key: 'D'}, 'D')
])

// diff只会进行同层精细化比较即使是同一虚拟节点，否则会暴力
const vnode4 = h('div', {}, [
	h('p', {key: 'a'}, 'a'),
	h('p', {key: 'b'}, 'b'),
	h('p', {key: 'c'}, 'c')
])

const vnode5 = h('div', {}, h('section', {key: 'd'}, [
	h('p', {key: 'a'}, 'a'),
	h('p', {key: 'b'}, 'b'),
	h('p', {key: 'c'}, 'c')
]) )

/**
 * 总结
 * 1.key为节点的标识，在data中设置
 * 2.只有选择器相同且key相同才能进行精细化比较
 * 3.只能进行同层比较，不能进行跨层比较
 * 4.同层并且都满足上述，即使是顺序打乱也是可以精细化比较
 * 5.如果上述的不满足就会进行
 **/